<template>
    <h2>优惠券列表</h2>
    <div class="search_box">
        <div class="flex">
            <div>
                <el-icon>
                    <Search />
                </el-icon><span>筛选搜索</span>
            </div>
            <div>
                <el-button @click="resetFrom">重载</el-button>
                <el-button type="primary" @click="submitFn">查询搜索</el-button>
            </div>
        </div>
        <div class="select_box">
            <el-form :inline="true" @submit.native.prevent="submitFn" ref="seacrchRef" :model="listParams">
                <el-form-item prop="name" label="优惠券名称：" label-width="120px">
                    <el-input clearable placeholder="请输入账号、姓名" v-model="listParams.name">
                    </el-input>
                </el-form-item>
                <el-form-item label="优惠券类型：" prop="type">
                    <el-select v-model="listParams.type" clearable placeholder="全部">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div class="add_box">
        <div>
            <el-icon>
                <Tickets />
            </el-icon><span>数据列表</span>
        </div>
        <div>
            <el-button @click="router.push('/sms/addCoupon')">添加</el-button>
        </div>
    </div>


    <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column align="center" prop="id" label="编号" />
        <el-table-column align="center" prop="name" label="优惠券名称" />
        <el-table-column align="center" prop="type" label="优惠券类型">
            <template #default="scope">
                {{ type(scope.row.type) }}
            </template>
        </el-table-column>
        <el-table-column align="center" prop="useType" label="可使用商品">
            <template #default="scope">
                {{ useType(scope.row.useType) }}
            </template>
        </el-table-column>
        <el-table-column align="center" prop="minPoint" label="使用门槛">
            <template #default="scope">
                {{ "满" + scope.row.minPoint + "元可用" }}
            </template>
        </el-table-column>
        <el-table-column align="center" prop="amount" label="面值">
            <template #default="scope">
                {{ scope.row.amount + "元" }}
            </template>
        </el-table-column>
        <el-table-column align="center" prop="platform" label="适用平台">
            <template #default="scope">
                {{ platform(scope.row.platform) }}
            </template>
        </el-table-column>
        <el-table-column align="center" prop="useType" label="有效期" width="165">
            <template #default="scope">
                {{ fomatDate(scope.row.startTime) + "至" + fomatDate(scope.row.endTime) }}
            </template>
        </el-table-column>
        <el-table-column align="center" label="状态">
            <template #default="scope">
                {{ new Date(scope.row.endTime).getTime() < new Date().getTime() ? "已过期" : "未过期" }} </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="250">
            <template #default="scope">
                <el-button type="primary" text @click="check(scope.row.id)">查看</el-button>
                <el-button type="primary" text @click="redact(scope.row.id)">编辑</el-button>
                <el-button type="primary" text @click="deleteFn(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="center">
        <el-config-provider :locale="zhCn">
            <el-pagination v-model:currentPage="listParams.pageNum" v-model:page-size="listParams.pageSize"
                :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
                :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </el-config-provider>
    </div>
</template>
<script setup lang='ts'>
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { Search } from "@element-plus/icons-vue"
import { reactive, toRefs, ref } from "vue"
import { user } from "@/api"
import { Tickets } from "@element-plus/icons-vue"
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import { useRouter } from "vue-router"
import { fomatDate } from "@/utils"
import { time } from "console";

const router = useRouter()


const options = [
    {
        value: '0',
        label: '全场赠券',
    },
    {
        value: '1',
        label: '会员赠券',
    },
    {
        value: '2',
        label: '购物赠券',
    },
    {
        value: '3',
        label: '注册赠券',
    }
]

const seacrchRef = ref<FormInstance>()

const resetFrom = () => {
    seacrchRef.value?.resetFields()
}

function platform(val: number) {
    if (val === 0) {
        return "全平台"
    } else if (val === 1) {
        return "移动"
    } else {
        return "PC"
    }
}

function useType(val: number) {
    if (val === 0) {
        return "全场通用"
    } else if (val === 1) {
        return "指定分类"
    } else if (val === 2) {
        return "指定商品"
    }
}

function type(val: number) {
    if (val === 0) {
        return "全场赠券"
    } else if (val === 1) {
        return "会员赠券"
    } else if (val === 2) {
        return "购物赠券"
    } else if (val === 3) {
        return "注册赠券"
    }
}

const handleSelectionChange = () => {

}

interface IState {
    tableData: ICouponList[];
    listParams: ICouponSearch
    total: number;
}

const state = reactive<IState>({
    total: 0,
    listParams: {
        type: "",
        name: '',
        pageNum: 1,
        pageSize: 10
    },
    tableData: []
})

const fetchDate = () => {
    user.couponListApi(state.listParams).then(res => {
        if (res.code === 200) {
            console.log(res);

            state.tableData = res.data.list
            state.total = res.data.total
        }
    })
}
fetchDate()


const submitFn = () => {
    fetchDate()
}

const handleSizeChange = () => {
    fetchDate()
}

const handleCurrentChange = () => {
    fetchDate()
}

// 查看
const check = (val: any) => {
    router.push(`/sms/couponHistory?id=${val}`)
}

// 编辑
const redact = (id: any) => {
    router.push(`/sms/updateCoupon?id=${id}`)
}

// 删除优惠券
const deleteFn = (id: number) => {
    ElMessageBox.confirm(
        '是否进行删除操作?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        user.couponDeleApi(id).then(res => {
            if (res.code === 200) {
                ElMessage({
                    type: 'success',
                    message: res.message,
                })
                // location.reload()  //强制刷新
                fetchDate()
            }
        })
    }).catch(() => { })
}



const { tableData, listParams, total } = toRefs(state)
</script>
<style lang="less" scoped>
.search_box {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;

    .flex {
        padding: 10px;
        display: flex;
        justify-content: space-between;
    }
}

.add_box {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin: 20px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    align-items: center;
}

.center {
    margin: 20px auto;
    width: 700px;
}
</style>